<html>
    <head>
        <title>单向数据流</title>
    </head>
    <body>
        <script>
            
                    /*
                        三、单向数据流

                                  所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：  

                                                父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

                                                这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

                                        ★、（每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。）


                                    <1>、这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用.

                                            在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值：

                                                    <template>
                                                        <view>
                                                            !-- 我是子组件componentA --
                                                            <view>{{myTitle}}</view>
                                                        </view>
                                                    </template>
                                                    <script>
                                                        export default {
                                                            props: ['title'],
                                                            data() {
                                                                return {
                                                                    myTitle:this.title
                                                                }
                                                            }
                                                        }
                                                    <//script>

                                            // 使用上面定义的组件
                                                    <template>
                                                        <view>
                                                            <!-- 我是父组件 --
                                                            <componentA :title="title"></componentA>
                                                        </view>
                                                    </template>
                                                    <script>
                                                        export default {
                                                            data() {
                                                                return {
                                                                    title:"hello"
                                                                }
                                                            }
                                                        }
                                                    <//script>


                                <2>、如果这个prop是以一种原始值传入的，需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

                                            <template>
                                                <view>
                                                    !-- 我是子组件componentA --
                                                    <view>{{normalizedSize}}</view>
                                                </view>
                                            </template>

                                            <script>
                                                export default {
                                                    props: ['size'],
                                                    computed: {
                                                        normalizedSize: function () {
                                                            return this.size.toLowerCase()
                                                        }
                                                    }
                                                }
                                            </、script>

                                        // 使用上面的组件

                                            <template>
                                                <view>
                                                    !-- 我是父组件 --
                                                    <componentA :size="size"></componentA>
                                                </view>
                                            </template>
                                            <script>
                                                export default {
                                                    data() {
                                                        return {
                                                            size:"M"
                                                        }
                                                    }
                                                }
                                            </、script>
                    */
        </script>
    </body>
</html>